<template>
  <div class="procurement">
    <div class="procurement-title">
      <span>采购订单统计</span>
      <el-divider/>
    </div>
    <div>
      <el-row :gutter="50">
        <el-col :span="4">
          <el-card shadow="hover" style="border: none">
            <span style="font-size: 20px;">采购总金额</span>
            <div style="margin-top: 60px">
              <span style="font-size: 60px">{{ totalPrice }}</span>元
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="hover" style="border: none">
            <span style="font-size: 20px;">签约供应商数量</span>
            <div style="margin-top: 60px">
              <span style="font-size: 60px">{{ totalSupplierCount }}</span>家
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="hover" style="border: none">
            <span style="font-size: 20px;">签约订单数量</span>
            <div style="margin-top: 60px">
              <span style="font-size: 60px">{{ orderCount }}</span>份
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" style="border: none">
            <span style="font-size: 20px;">供应商产品订单分布</span>
            <el-select v-model="supplierId" placeholder="请选择" @change="hand" style="margin-left: 50px">
              <el-option
                v-for="item in kuList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <div id="chart2" style="height: 250px;" data-zoomable data-draggable/>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="margin-top: 50px">
        <el-col :span="24">
          <el-card shadow="hover" style="border: none">
            <span style="font-size: 20px;">采购金额与数量趋势</span>
            <div id="chart" style="height: 250px;" data-zoomable data-draggable/>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import orderApi from '@/api/order/order'
import supplierApi from '@/api/supplier/supplier'
import { onMounted, reactive, ref } from 'vue'
import * as echarts from 'echarts'

const totalPrice = ref()
const totalSupplierCount = ref()
const orderCount = ref()
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' }
  },
  legend: {},
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '采购数量/月',
      min: 0,
      max: 20,
      position: 'right',
      axisLabel: {
        formatter: '{value} 份'
      }
    },
    {
      type: 'value',
      name: '采购金额/元',
      min: 0,
      max: 300,
      position: 'left',
      axisLabel: {
        formatter: '{value} 元'
      }
    }
  ],
  series: [
    {
      name: '采购数量',
      type: 'bar',
      yAxisIndex: 0
    },
    {
      name: '采购金额',
      type: 'line',
      smooth: true,
      yAxisIndex: 1
    }
  ]
}
const option2 = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  }
}
// eslint-disable-next-line no-unused-vars
const kuList = ref()
const supplierId = ref()
// eslint-disable-next-line no-unused-vars
let supplier = reactive({})
let infoAndCount = reactive([])

const get = () => {
  supplierApi.getAllsupplier().then(res => {
    kuList.value = res.data
    // console.log(kuList.value)
    supplier = res.data
  })
}
const getAllPrice = () => {
  orderApi.getAllPrice().then(res => {
    totalPrice.value = res.data
  })
}
const getAllSupplierCount = () => {
  supplierApi.getAllSupplierCount().then(res => {
    totalSupplierCount.value = res.data
  })
}
const getOrderCount = () => {
  orderApi.getAllOrderCount().then(res => {
    orderCount.value = res.data
  })
}

const show = () => {
  const myCharts = echarts.init(document.getElementById('chart'))
  myCharts.setOption(option)
  window.onresize = function() {
    myCharts.resize()
  }
  orderApi.getAllByYearAndMonth('2023').then(res => {
    const allOrder = res.data.allOrder
    const xmonth = []
    const ycount = []
    const yprice = []
    for (let i = 0; i < res.data.allOrder.length; i++) {
      xmonth.push(allOrder[i].month)
      ycount.push(allOrder[i].orderCount)
      yprice.push(allOrder[i].allPrice)
    }
    myCharts.setOption({
      xAxis: {
        data: xmonth
      },
      series: [
        {
          data: ycount
        },
        {
          data: yprice
        }
      ]
    })
  })
}
// eslint-disable-next-line no-unused-vars
const hand = () => {
  // console.log(infoAndCount)
  const myCharts = echarts.init(document.getElementById('chart2'))
  myCharts.setOption(option2)
  supplierApi.getModelAndCount(supplierId.value).then(res => {
    infoAndCount = []
    res.data.map(item => {
      infoAndCount.push({ name: item.info, value: item.sum })
    })
    myCharts.setOption({
      series: [
        {
          name: '采购次数',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: infoAndCount
        }

      ]
    })
  })
}
onMounted(async() => {
  getAllPrice()
  getAllSupplierCount()
  getOrderCount()
  show()
  get()
})
</script>

<style scoped lang="scss">
.procurement-title {
  span {
    font-size: 30px;
    font-weight: bold;
  }
}
</style>
